<template>
  <div class="swiper-block">
    <!-- 优化一只显示前后2页内容 -->
    <van-swipe :show-indicators="false" @change="onSwipeChange">
      <template v-for="(item, index) in data">
        <van-swipe-item
          v-if="Array.from({ length: 5 }, (_, i) => (currentIndex - 2 + i + data.length) % data.length).includes(index)"
          :key="index"
        >
          <swiper-item :data="item" :pageIndex="index"></swiper-item>
        </van-swipe-item>
        <van-swipe-item v-else :key="index"></van-swipe-item>
      </template>
    </van-swipe>
    <van-row gutter="20">
      <van-col span="8">
        <div>默认:当前页面 {{ currentIndex }}</div></van-col
      >
      <van-col span="8"> <van-button type="primary" @click="jumpToXZGC">跳转列表新增改查</van-button></van-col>
    </van-row>

    <!-- 选中添加的商品 -->
    <h2>选中的商品</h2>
    <div class="selected-diashed">
      <van-tag
        plain
        type="primary"
        class="selected-tag"
        :style="{ color: getRandomColor() }"
        size="large"
        closeable
        @close="close"
        v-for="item in tags"
        :key="item.id"
      >
        <van-badge :content="item.num"> {{ item.name }}</van-badge>
      </van-tag>
    </div>
  </div>
</template>

<script>
import axios from "axios"
import SwiperItem from './swiper-item.vue';
let vm = null
export default {
  name: "SwiperPage",
  components: {
    SwiperItem,
  },
  data () {
    return {
      currentIndex: 0,//默认
    }
  },
  created () {
    vm = this
  },
  mounted () {
    this.getData();
  },
  computed: {
    tags () {
      return this.$store.state.cartShops
    },
    data () {
      return this.$store.state.diashes
    },

  },
  methods: {
    async getData () {
      const res = await axios.get(`https://mock.apifox.cn/m1/1149415-0-default/400Dishes`);
      const { data, success } = res.data;
      if (success) {
        //九宫格 九张图片一组 再分一个二维数组
        // 定义一个二维数组
        const result = []
        // 循环将 arr 分组
        for (let i = 0; i < data.length; i += 9) {
          // 使用 slice 方法获取每组 9 个元素
          const group = data.slice(i, i + 9)
          // 将每组元素添加到二维数组
          result.push(group)
        }
        this.$store.commit('add_total_foods', result);
        console.log("%c Line:24 🌮 add_total_foods", "font-size:18px;color:#ffffff;background:#273c75", result);
      }

    },
    add (item) {
      const item_obj = JSON.parse(item)
      this.$store.commit('add_diashes', item_obj);
    },
    jumpToXZGC () {
      this.$router.push({
        name: "xzgc"
      })
    },
    close () {

    },
    onSwipeChange (index) {
      this.currentIndex = index
      console.log("%c Line:137 🥝 当前索引", "font-size:18px;color:#ffffff;background:#6666FF", index);
    },
    getRandomColor () {
      var letters = "0123456789ABCDEF";
      var color = "#";
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }
  },
}
</script>

<style lang="less" scoped>
.swiper-block {
  // margin-top: 46px;
}
::v-deep .selected-tag {
  padding: 10px 20px;
  margin-right: 20px;
  margin-bottom: 20px;
}
.swiper {
  height: 300px;
  .swiper-slide {
    background-color: rebeccapurple;
  }
}
</style>